<template>
    <div class="member" v-if="!isLogin">
        <div class="header-con">
            
            
                <div class="user-info">
                    <!--用户信息-->
                    <div class="avatar-con">
                    <div class="avatar">
                     <img src="../../public/images/user.png" class="image-info">
                    </div>
                    </div>
                    <div class="person-con">
                    <span>
                        <router-link to="/user/login" class="mui-navigate-right" style="color: white">
                        登录
                        </router-link>
                        
                        /
                        <router-link to="/user/register" class="mui-navigate-right" style="color: white">
                        注册
                        </router-link>
                    </span>
                    </div>

                </div>
           
            
        </div>
    </div>

    <div class="member" v-if="isLogin">
        <div class="header-con">
        <div class="user-info">
            <!-- ⽤户信息 -->
            <div class="avatar-con">
            <div class="avatar">
            <img src="../../public/images/user.png" class="image-info" />
            </div>
            </div>
            <div class="person-con">
            <span>{{ username }}</span>
            </div>
            </div>
            </div>



    <!-- <div @click="logout" class="mui-navigate-right">
        <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png">
        <div class="mui-media-body">退出登录</div>
    </div> -->



<!-- <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
  <div class="mui-navigate-right">
    <img class="mui-media-object mui-pull-left" src="../../public/images/user.png">
    <div class="mui-media-body">我的订单</div>
  </div>
</li>
<li class="mui-table-view-cell mui-media">
  <div class="mui-navigate-right">
    <img class="mui-media-object mui-pull-left" src="../../public/images/user.png">
    <div class="mui-media-body">收货地址</div>
  </div>
</li>
<li class="mui-table-view-cell mui-media">
  <div class="mui-navigate-right">
    <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png">
    <div class="mui-media-body">退出登录</div>
  </div>
</li>
</ul> -->




            <div>

                


                <van-cell
                is-link
                style="--van-cell-line-height: 48px"
                v-for="(menu, index) in userMenu"
                :key="index"
                :to="menu.path"
                @click="handle(menu)"
                >
            
            <template #title>
                <span class="custom-title">{{ menu.name }}</span>
            </template>
            <template #icon>
            <van-image width="48px" height="48px" :src="menu.img">
            </van-image>
            </template>
        </van-cell>
            </div>
    </div>


</template>

<script setup>
 //import Login from './user/Login.vue';

// import { register } from '@/api/login';
import { ref } from 'vue';
import Cookies from 'js-cookie';

import {logout} from '@/api/login';
import login from '@/api/login';
import { showNotify } from 'vant';
let isLogin = ref()
let username = ref()
let userMenu = ref([
 { name: '我的订单', img: '../../public/images/user.png', path: '/home' },
 { name: '收获地址', img: '../../public/images/user.png', path: '' },
 { name: '退出登录', img: '../../public/images/user.png', path: '' }
])
username.value = Cookies.get('username')
if (username.value != null) {
isLogin.value = true
}

const handle = async (menu) => {
//退出登录
if (menu.name == '退出登录') {
//发出退出登录请求
const res = await logout()
//退出成功
if (res.code == 2) {
//清除前端cookie数据
Cookies.remove('username')
Cookies.remove('userid')
Cookies.remove('Token')
//设置登录状态
isLogin.value = false
showNotify({
message: '退出登录成功'
 })
 }
 }
}
</script>

<style lang="scss" scoped>
.member {
margin-bottom: 15px;
}
.header-con {
padding: 10px;
background-color: #fff;
}
.user-info {
position: relative;
overflow: hidden;
width: 100%;
height: 120px;
background: linear-gradient(90deg,#28a2ff,#ffd787);
box-shadow: 0 0.1rem 0.25rem #f8e3c6;
}
.avatar-con {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
}
.avatar{ 
width: 60px;
height: 60px ;
 overflow: hidden ;
 box-shadow: 0 2px 10px rgba(0,0,0,15);
 border: 1px solid hsla(0,0%,100%,.4) ;
 border-radius: 50% 50% ;
}
 .image-info{
 width: 100% ;
 height: 100%;
 }
 
.person-con {
 position: absolute;
 left: 90px;
 top: 50%;
 transform: translateY(-50%) ;
 color: #fff;
 }




.mui-table-view .mui-media, .mui-table-view .mui-media-body{
line-height: 42px;
}
.mui-table-view-cell:after{
left: 0px;
}
</style>
